<template>
  <NavBarVue :title="'评论'"/>
  <view class="Praise">
    <view class="comlist" v-for="item in comlist" :key="item.id">
      <view class="lefcom">
        <BaseCoverImage :src="item.imgone" class="tx"/>
        <view class="conul">
          <view class="conli">
            <view class="act">
              <view style="font-size: 28rpx; font-weight: 600;">{{item.name}}</view>
              <view class="zo">作者</view>
            </view>
            <view style="font-size: 20rpx; color:#999;margin-bottom: 10rpx;">{{item.hf}}</view>
            <view style="font-size: 24rpx; color:#666;margin-bottom: 20rpx;">{{item.nr}}</view>
            <view class="play">
              <view style="font-size: 20rpx; color:#ccc; margin-bottom: 10rpx;">
                {{item.play}}
              </view>
              <view class="fx"></view>
            </view>
          </view>
          <view class="commpl">
            <view style="display: flex;" class="zlik">
              <u-icon name="heart" color="#666" size="18"></u-icon>
              <view>赞</view>
            </view>
            <view style="display: flex;" class="plik">
              <u-icon name="chat" color="#666" size="18"></u-icon>
              <view>评论</view>
            </view>
          </view>
        </view>
      </view>
      <view class="rigcom">
        <BaseCoverImage :src="item.imgtwo"/>
      </view>
    </view>
  </view>
</template>

<script setup>
import {reactive, ref} from 'vue';
//数据--------
const comlist = reactive([
  {
    id: 0,
    name: "壹禾子",
    hf: "回复了你的评论 2天前",
    nr: "这个活动非常有意思",
    play: "好玩吗",
    imgone: "/static/images/1002.png",
    imgtwo: "/static/images/1001.png"
  },
  {
    id: 1,
    name: "阿西吧",
    hf: "回复了你的评论 2天前",
    nr: "这个活动非常有意思",
    play: "好玩吗",
    imgone: "/static/images/1003.png",
    imgtwo: "/static/images/1001.png"
  },
  {
    id: 2,
    name: "壹禾子",
    hf: "回复了你的评论 2天前",
    nr: "这个活动非常有意思",
    play: "好玩吗",
    imgone: "/static/images/1004.png",
    imgtwo: "/static/images/1001.png"
  },
  {
    id: 3,
    name: "壹禾子",
    hf: "回复了你的评论 2天前",
    nr: "这个活动非常有意思",
    play: "好玩吗",
    imgone: "/static/images/1005.png",
    imgtwo: "/static/images/1001.png"
  }
])

</script>

<style lang="scss" scoped>
.Praise {
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #fff;
  box-sizing: border-box;
  padding: 0 40rpx;

  .comlist {
    display: flex;
    justify-content: space-between;
    background: #fff;
    margin-bottom: 3rpx;
    padding: 20rpx 0;
    border-top: 2px solid #f2f2f2;

    .rigcom {
      width: 80rpx;
      height: 80rpx;
    }
  }

  .comlist:last-child {
    border-bottom: 2px solid #f2f2f2;
  }
}

.login_top {
  height: 80rpx;
  display: flex;
  align-items: center;
  background: white;
  box-sizing: border-box;
  padding: 0rpx 20rpx;

  .top_p {
    flex: 1;
    text-align: center;
    font-weight: bold;
  }
}

.act {
  width: auto;
  line-height: 40rpx;
  height: 40rpx;
  display: flex;
  font-size: 20rpx;
  margin-bottom: 10rpx;

  .zo {
    margin-left: 10rpx;
    width: 60rpx;
    line-height: 30rpx;
    height: 30rpx;
    border-radius: 30rpx;
    text-align: center;
    border: 2rpx solid #ccc;
    color: #666;
    font-size: 20rpx;
  }
}

.play {
  display: block;
  width: 200rpx;
  height: 40rpx;
  position: relative;
  box-sizing: border-box;
  padding: 0rpx 20rpx;

}

.fx {
  width: 6rpx;
  height: 30rpx;
  background: #f2f2f2;
  position: absolute;
  left: 0rpx;
  top: 0rpx;

}


.commpl {
  display: flex;
  font-size: 22rpx;

  .zlik {
    width: 110rpx;
    height: 50rpx;
    line-height: 50rpx;
    background: #f2f2f2;
    border-radius: 30rpx;
    box-sizing: border-box;
    padding: 0rpx 20rpx;

  }

  .plik {
    margin-left: 20rpx;
    width: 120rpx;
    height: 50rpx;
    line-height: 50rpx;
    background: #f2f2f2;
    border-radius: 30rpx;
    box-sizing: border-box;
    padding: 0rpx 10rpx;

  }

}

.tx {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  margin-right: 10rpx;
}

.tuc {
  width: 80rpx;
  height: 80rpx;
  border-radius: 10rpx;
}

.lefcom {
  display: flex;
}
</style>
